<template>
  <!-- 修改用户名,邮箱,备注 -->
  <custom-modal
    width="500px"
    :visible="visible"
    :title="$t('modifyInfo')"
    :destroyOnClose="true"
    :maskClosable="false"
    :suring="loading"
    @ok="handleSubmit"
    @cancel="resetData"
  >
    <a-form-model
      ref="formComp"
      :model="formData"
      :rules="rules"
      layout="horizontal"
      class="AsteriskAfter newEditStyle"
    >
      <a-row :gutter="20" v-if="field === 'name'">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('userName')" prop="name">
            <a-input v-model="formData.name" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="24" :sm="24" v-if="field === 'email'">
          <a-form-model-item :label="$t('userEmail')" prop="email">
            <a-input v-model="formData.email" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="24" :sm="24" v-if="field === 'remark'">
          <a-form-model-item :label="$t('remark')" prop="remark">
            <custom-text-area
              @change="formData.remark = $event"
              :val="formData.remark"
              :rows="8"
              :max-len="200"
            ></custom-text-area>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </custom-modal>
</template>
<script>
import CustomModal from '@/components/CustomModal/index.vue'
import { mapState } from 'vuex'
import userApi from '@/api/modules/system/user'
import { checkEmail, checkTextLen } from '@/utils/validate'
import CustomTextArea from '@/components/CustomTextArea/index.vue'
export default {
  components: {
    CustomModal,
    CustomTextArea
  },
  props: {
    field: {
      type: String,
      default: 'name'
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo
    })
  },
  data () {
    const _this = this
    const checkUserName = (rule, text, callback) => {
      const reg = /[^a-zA-Z0-9\u4E00-\u9fa5]/
      if (reg.test(text)) {
        callback(new Error(this.$t('verifyUserNameOrAccountTip')))
        return
      }
      callback()
    }
    return {
      visible: false,
      loading: false,
      formData: _this.getInitFormData(),
      rules: {
        name: [
          { required: true, message: this.$t('pleaseInput') },
          { validator: checkUserName },
          { validator: checkTextLen(20, true) }
        ],
        email: [
          { required: true, message: this.$t('pleaseInput') },
          {
            validator: (rule, value, callback) => {
              checkEmail(rule, value, callback)
            }
          },
          { validator: checkTextLen(50) }
        ],
        remark: [{ validator: checkTextLen(200) }]
      },
      fileds: {
        name: {
          api: '/user/name/current'
        },
        email: {
          api: '/user/email/current'
        },
        remark: {
          api: '/user/remark/current'
        }
      }
    }
  },
  methods: {
    handleSubmit () {
      const vm = this
      vm.$refs.formComp.validate((valid) => {
        if (valid) {
          this.loading = true
          const data = { [this.field]: this.formData[this.field].trim() }
          const apiPath = this.fileds[this.field].api
          userApi
            .modifyUserPartInfo(apiPath, data)
            .then(() => {
              this.$message.success(this.$t('successfullyOperation'))
              this.$store.commit('setUserInfo', {
                ...this.$store.state.user.userInfo,
                ...data
              })
              this.switchVisible(false)
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    getInitFormData () {
      const { userInfo } = this.$store.state.user
      return {
        id: userInfo.id,
        name: userInfo.name,
        email: userInfo.email,
        remark: userInfo.remark
      }
    },
    resetData () {
      this.visible = false
      this.formData = this.getInitFormData()
    },
    switchVisible (val) {
      this.visible = val
      if (val) {
        this.formData = this.getInitFormData()
      }
    }
  }
}
</script>
